<template>
  <div class="home-page">
    <div class="swiper-container" :style="{'height':swiperHeight+'px'}">
      <div class="sanjiao">
        <img src="../../assets/sanjiao.png" alt="">
        <img src="../../assets/down.png" alt="" class="down-jiantou">
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide box1">
          <div>
            <span><strong>2021年1月起新加入的合作伙伴大学</strong><br>雅各布大学国际学院(JUIC)是我们与德国雅各布大学合作，最新成立的嵌入式学院。</span>
            <!--            <span>牛津学院</span>-->

          </div>
        </div>

      </div>
      <!-- Add Pagination -->
      <!--      <div class="swiper-pagination"></div>-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <div class="main-center">
      <h1 style="text-align: center;margin-top: 50px">雅各布大学</h1>
      <div>
        <img src="../../assets/jacobs/1474634319_JACOBS_LOGO-1.jpg" alt="" style="width: 285px;display: block;margin: 0 auto">
      </div>
      <div class="details">
        <p>JUIC是我们新开办的、位于德国雅各布大学主校区的嵌入式学院。</p>
        <p>JUIC将于2021年1月开学，迎来第一批国际学生。学院将提供一系列课程，帮助国际学生做好准备，进入雅各布大学继续攻读本科课程。学生在JUIC掌握适应大学阶段学习所要求的学习技能和英语语言水平，有能力在雅各布大学继续学位学习并取得成功。顺利完成在JUIC第一阶段的学习以后，学生可直接进入雅各布大学继续学业。供学生选择的科目范围很广，包括化学、计算机科学、工程学、国际商务、物理和机器人学等。</p>
        <p>雅各布大学位于德国不莱梅，是一所以英语为通用语的研究型私立大学。该校建立于2001年，在德国国内和国际大学排名中不断取得顶尖成绩。该校1500余名学生来自120多个国家，其中约80% 学生为研究和深造移居德国。雅各布大学的研究项目由德国研究基金会或欧盟研究与创新项目以及全球知名公司资助。点击此处 观看欢迎视频</p>
       <p><strong style="font-size: 22px;">本科学习</strong></p>
        <ul style="margin-top: -10px">
          <li>- 商学</li>
          <li>- 计算机科学</li>
          <li>- 工程学</li>
          <li>- 生命科学</li>
          <li>- 社会科学</li>
        </ul>
        <p><strong>2021年1月开课的课程开始招生，2020年6月开始英语预科班。</strong></p>
        <p><strong>欲知更多信息，请发邮件至:<a href="mailto:pathways@oxfordinternational.com">pathways@oxfordinternational.com</a></strong></p>
        </div>
    </div>

  </div>
</template>

<script>
  import swiper from '../../assets/swiper/swiper-bundle.min'
  export default {
    name: "index",
    created() {
      let H = window.innerHeight

      this.swiperHeight = H
    },
    mounted() {
      var swiper = new Swiper('.swiper-container', {
        // spaceBetween: 30,
        centeredSlides: true,
        /*autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },*/
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    }
  }
</script>

<style scoped lang="scss">
  .main-center {
    max-width: 1200px;
    margin: 0 auto;
  }

  .swiper-container {
    width: 100%;
    height: 1000px;
    position: relative;
  }

  .sanjiao {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    z-index: 222;

    img {
      width: 120px;
      display: block;
    }

    span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      display: block;
      text-align: center;
      color: #303030;
      z-index: 999;
    }

    .down-jiantou {
      position: absolute;
      left: 50%;
      margin-left: -19px;
      bottom: 9px;
      width: 38px;
      animation: shangxia 0.7s linear infinite;
    }
    @keyframes shangxia {
      0% {bottom: 9px}
      50%{bottom: 3px}
      100%{bottom: 9px}
    }
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide > div:nth-of-type(1) {
    margin: 60px 0;
    margin-bottom: 35px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .65);
    padding: 20px 35px;
  }

  .swiper-slide > div:nth-of-type(1) span:nth-of-type(1) {
    font-size: 17px;
    color: #303030;
    margin-bottom: 20px;
    line-height: 34px;
  }

  .swiper-slide > div:nth-of-type(1) span:nth-of-type(2) {
    font-size: 25px;
    font-weight: bold;
    color: #303030;
  }

  .swiper-slide > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    padding: 10px 40px;
    background: rgba(255, 255, 255, .65);
    transition: all .4s ease;
    cursor: pointer;
  }

  .swiper-slide > div:nth-of-type(2) span {


    line-height: 32px;
    font-size: 18px;
    color: #303030;
  }

  .swiper-slide > div:nth-of-type(2):hover {
    background: #3281c4;
  }

  .box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box1 {
    background: url("../../assets/jacobs/jacobs.png") no-repeat center top;
    background-size: 100% auto ;
  }

  .box2 {
    background: url("../../assets/UP-2.jpg") no-repeat center center;
  }

  .box3 {
    background: url("../../assets/UP-3.jpg") no-repeat center center;
  }

  .box4 {
    background: url("../../assets/UP-4.jpg") no-repeat center center;
  }
  .details{
    font-size: 18px;
    line-height: 36px;
    color: #303030;
    padding-bottom: 100px;
    a{
      text-decoration: none;
      color: #303030;
    }
  }
</style>
